{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <!--名称-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" placeholder="请输入名称" class="layui-input" value="{$row.name}">
                        </div>
                    </div>
                    <!--单图-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">单图</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="image" class="layui-input" value='{$row.image}'>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="image">上传单图</button>
                                <div class="layui-upload-list" id="imagePreview" style="display: flex;">
                                    <!--加载默认图片-->
                                    <script>
                                        getImagesHtmlForEdit('{$row.image}', 'image')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--多图-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">多图</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="images" class="layui-input" value="{$row.images}">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="images">上传多图</button>
                                <div class="layui-upload-list" id="imagesPreview" style="display: flex;">
                                    <!--加载默认图片-->
                                    <script>
                                        getImagesHtmlForEdit('{$row.images}', 'images')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--销量-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">销量</label>
                        <div class="layui-input-block">
                            <input type="number" name="sales" placeholder="请输入销量" class="layui-input" value="{$row.sales}">
                        </div>
                    </div>
                    <!--描述-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <script id="desc" name="desc" type="text/plain" style="width:100%;height:500px;"></script>
                            <script>
                                //实例化编辑器
                                UE.getEditor('desc');
                                //格式化富文本
                                htmlDecode("{$row.desc}", 'desc')
                            </script>
                        </div>
                    </div>
                    <!--开关:0=下架,1=上架-->
                    <input id="switch" type="hidden" name="switch" value='{$row.switch}'>
                    <div class="layui-form-item">
                        <label class="layui-form-label">开关</label>
                        <div class="layui-input-inline">
                            <input id="switch_show" type="checkbox" {eq name="$row.switch" value="1"}checked{/eq} lay-filter="switchChange" value="{$row.switch}" lay-skin="switch" lay-text="上架|下架">
                        </div>
                    </div>
                    <!--支付时间-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付时间</label>
                        <div class="layui-input-inline">
                            <input id='pay_time'  type='text' name='pay_time' placeholder='请输入支付时间' class='layui-input'>
                            <!--格式化时间-->
                            <script>
                                formatDate("{$row.pay_time}", 'pay_time')
                            </script>                            
                        </div>
                    </div>
                    <!--状态:1=上架,0=下架-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline" id="status">
                            <select name="status" lay-verify="required">
                                <option value="" >请选择状态</option>
                                    <option value="1" {eq name="$row.status" value="1"}selected{/eq}>上架</option>
                                    <option value="0" {eq name="$row.status" value="0"}selected{/eq}>下架</option>
                            </select>
                        </div>
                    </div>
                    <!--发放时间-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">发放时间</label>
                        <div class="layui-input-inline">
                            <input id='send'  type='text' lay-verify='required' name='send' placeholder='请输入发放时间' class='layui-input' value='{$row.send}'>                         
                        </div>
                    </div>
                    <!--水果-->
                    <div class='layui-form-item'>
                        <label class='layui-form-label'>水果</label>
                        <div class='layui-input-block'>
                            <input type='checkbox' name='fruit_apple' lay-skin='primary' title='苹果' {if false !== strpos($row.fruit, 'apple')}checked{/if}>
                            <input type='checkbox' name='fruit_orange' lay-skin='primary' title='橘子' {if false !== strpos($row.fruit, 'orange')}checked{/if}>
                            <input type='checkbox' name='fruit_banana' lay-skin='primary' title='香蕉' {if false !== strpos($row.fruit, 'banana')}checked{/if}>

                        </div>
                    </div>
                    <!--爱好-->
                    <div class='layui-form-item'>
                        <label class='layui-form-label'>爱好</label>
                        <div class='layui-input-block'>
                            <input type='checkbox' name='interest_swim' lay-skin='primary' title='游泳' {if false !== strpos($row.interest, 'swim')}checked{/if}>
                            <input type='checkbox' name='interest_run' lay-skin='primary' title='跑步' {if false !== strpos($row.interest, 'run')}checked{/if}>
                            <input type='checkbox' name='interest_basket' lay-skin='primary' title='篮球' {if false !== strpos($row.interest, 'basket')}checked{/if}>

                        </div>
                    </div>
                    <!--分类-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-block">
                            <input type="number" name="cate_id" placeholder="请输入分类" class="layui-input" value="{$row.cate_id}">
                        </div>
                    </div>
                    <!--单视频-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">单视频</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="h_video" class="layui-input" value='{$row.h_video}'>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="h_video">上传单视频</button>
                                <div class="layui-upload-list" id="h_videoPreview" style="display: flex;">
                                    <!--加载默认视频-->
                                    <script>
                                        getVideoHtmlForEdit('{$row.h_video}', 'h_video')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--多视频-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">多视频</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="s_videos" class="layui-input" value="{$row.s_videos}">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="s_videos">上传多视频</button>
                                <div class="layui-upload-list" id="s_videosPreview" style="display: flex;">
                                    <!--加载默认视频-->
                                    <script>
                                        getVideoHtmlForEdit('{$row.s_videos}', 's_videos')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--证书文件-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">证书文件</label>
                        <div class="layui-input-block">
                            <input class="layui-input layui-input-inline" name="crt_file" value='{$row.crt_file}' placeholder="请上传证书文件" disabled style='width: 500px'>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="crt_file">上传单文件</button>
                                <div class="layui-upload-list" id="crt_filePreview" style="display: none;">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;

        //单图单图上传
        bw_upload(upload, 'image', 'image');
        //多图多图上传
        bw_upload(upload, 'images', 'images');
        //监听switch开关
        form.on('switch(switchChange)', function(obj){
            var state = this.checked ? '1' : '0';
            
            layui.$('#switch_show').attr('value', state);
            layui.$('#switch').attr('value', state);
        });
        //支付时间 日期时间选择器
        laydate.render({
            elem: '#pay_time'
            ,type: 'datetime'
        });
        //发放时间 日期选择器
        laydate.render({
            elem: '#send'
        });
        //单视频单视频上传
        bw_upload(upload, 'h_video', 'video');
        //多视频多视频上传
        bw_upload(upload, 's_videos', 'videos');
        //证书文件单文件上传
        bw_upload(upload, 'crt_file', 'file');


        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

            if(!data.name) {layer.msg('名称不能为空', {icon: 2});return false}
            if(!data.image) {layer.msg('单图不能为空', {icon: 2});return false}
            if(!data.sales) {layer.msg('销量不能为空', {icon: 2});return false}
            if(!data.switch) {layer.msg('开关不能为空', {icon: 2});return false}
            //时间转为时间戳
            data.pay_time = Date.parse(data.pay_time) / 1000;
            //水果 多选转为字符串
            var fruit = [];
            if(data.fruit_apple && data.fruit_apple == 'on') {
                fruit.push('apple');
                delete data.fruit_apple;
            }
            if(data.fruit_orange && data.fruit_orange == 'on') {
                fruit.push('orange');
                delete data.fruit_orange;
            }
            if(data.fruit_banana && data.fruit_banana == 'on') {
                fruit.push('banana');
                delete data.fruit_banana;
            }

            data.fruit = fruit.join(',');
            //爱好 多选转为字符串
            var interest = [];
            if(data.interest_swim && data.interest_swim == 'on') {
                interest.push('swim');
                delete data.interest_swim;
            }
            if(data.interest_run && data.interest_run == 'on') {
                interest.push('run');
                delete data.interest_run;
            }
            if(data.interest_basket && data.interest_basket == 'on') {
                interest.push('basket');
                delete data.interest_basket;
            }

            data.interest = interest.join(',');
            if(!data.interest) {layer.msg('爱好不能为空', {icon: 2});return false}


            //ajax调用后台接口
            bwajax.post("{:Url('edit')}?id={$row.id}", data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                })

            return false;
        })
    });
</script>
{/block}